<template>
<!-- 点餐-蚂蚁上树-确认订单-选择支付方式 -->
  <div>
    <van-cell is-link @click="showPopup">展示弹出层</van-cell>
    <van-popup v-model="show" position="bottom" closeable :style="{ height: '30%'}">
      <ul>
        <li class="title">支付方式</li>
        <van-radio-group v-model="radio">
        <li>
          <span>在线支付</span>
            <van-radio name="1"  checked-color="#4cd964"></van-radio>
        </li>
        <li>
            <span>货到付款（商家不支持货到付款）</span>
            <van-radio name="2"  checked-color="#4cd964"></van-radio>
        </li>
        </van-radio-group>
      </ul>
    </van-popup>
  </div>
</template>

<script>
import { Popup,Cell, RadioGroup, Radio } from "vant";
export default {
  name: "Payment",
  components: {
    [Popup.name]: Popup,
    [Cell.name]: Cell,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
  },
  data() {
    return {
      show: false,
       radio: '1',
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
  },
};
</script>

<style lang="less" scoped>
    ul{
        width:100%;
        li{
            height: 60px;display: flex;justify-content: space-between;align-items: center;
            padding: 0 30px 0 15px;
        }
        .title{height:48px ;background-color: #fafafa;justify-content: center;}
    } 
</style>